<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>ToDoList</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <section class="main">
      <!--搜索框容器-->
      <section class="form-container">
        <form action="#" class="form">
          <!-- 搜索框 -->
          <label class="input-container">
            <input id="todo-input" type="text" />
          </label>
          <!-- 添加按钮 -->
          <button class="form-button" id="add-button" type="button">
            提交
          </button>
        </form>
      </section>
      <!--待办事项列表-->
      <section class="list-container">
        <h2>待办事项</h2>
        <ul id="todo-list" class="todo-list">

        </ul>
      </section>

      <!--已办事项列表-->
      <section class="list-container">
        <h2>已办事项</h2>
        <ul id="done-list" class="todo-list">
        </ul>
      </section>
    </section>
    <script src="./js/index.js"></script>
  </body>
</html>
